<template>
  <div class="orderDetail">
    <div class="pageTop">
      <span class="iconfont backHistory" @click="spotCheckView">&#xe6eb;</span>
      <span class="workOrderDetails_header_title">异常预警详情</span>
      <span class="iconfont home" v-focusable @click="backToHomepage">&#xe668;</span>
    </div>
    <div class="earlywarning-nfo">
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-value">
            {{ detail.content || '' }}
            <span :class="'status' + detail.status" v-show="detail.status"> （{{ statusData[+detail.status] || '' }}） </span>
          </div>
        </div>
      </div>
      <div class="info-other-title">预警信息</div>
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">预警值：</div>
          <div class="info-value">
            {{ detail.alarmData || '' }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">预警等级：</div>
          <div class="info-value" :class="'alarmLevel' + detail.alarmLevel">
            {{ detail.alarmLevelName || '' }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">负责人：</div>
          <div class="info-value">
            {{ detail.devicePrincipalName || '' }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">接受提醒人：</div>
          <div class="info-value">
            <div>
              <div v-if="detail.deviceReminderName">个人-{{ detail.deviceReminderName || '' }}</div>
              <div v-if="detail.classesGroupManageId">排班表-{{ detail.classesGroupManageName || '' }}</div>
            </div>
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">预警通知方式：</div>
          <div class="info-value">
            <div>{{ detail.noticeTypeName }}</div>
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">发生时间：</div>
          <div class="info-value">
            {{ detail.createTime | formatDate }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">关闭时间：</div>
          <div class="info-value">
            {{ detail.closeTime | formatDate }}
          </div>
        </div>
      </div>
      <div class="info-other-title">基本信息</div>
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">部门：</div>
          <div class="info-value">
            {{ detail.departmentName || '' }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">设备名称：</div>
          <div class="info-value">
            {{ detail.deviceName || '' }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">数据名称：</div>
          <div class="info-value">
            {{ detail.dataName || '' }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">数据ID：</div>
          <div class="info-value">
            {{ detail.dataCode || '' }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">附件：</div>
          <div class="info-value">
            <template v-if="detail.imageFiles && detail.imageFiles.length">
              <x-img v-for="item in detail.imageFiles" :src="item.resizeUrl" :key="item.id" @click.native="showImage(item)"></x-img>
            </template>
            <template v-else>
              无
            </template>
          </div>
        </div>
      </div>
      <div class="info-other-title" v-if="detail.status !== 1">关联工单 <span v-if="!workSheet.sn" style="margin-left: 6px">无</span></div>
      <div class="info-list" v-if="workSheet.sn" @click="toWorkSheetNo(detail.workSheetId)">
        <div class="info-list-item">
          <div class="info-title">工单编号：</div>
          <div class="info-value">
            {{ workSheet.sn }}
          </div>
          <div class="info-value" :class="'priority' + workSheet.priority" style="text-align: right;">
            <span class="titleContent" v-if="workSheet.priority == '1'">
              一般
            </span>
            <span class="titleContent" v-else-if="workSheet.priority == '2'">
              重要
            </span>
            <span class="titleContent" v-else-if="workSheet.priority == '3'">
              紧急
            </span>
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">设备名称：</div>
          <div class="info-value">
            {{ workSheet.deviceName }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">负责人：</div>
          <div class="info-value">
            {{ workSheet.leaderName || '无' }}
          </div>
          <div class="info-value" style="text-align: right;">
            <x-icon type="ios-arrow-right" size="18" fill="#fff"></x-icon>
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">描述：</div>
          <div class="info-value">
            {{ workSheet.description }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">创建时间：</div>
          <div class="info-value" style="color: rgba(255,255,255,0.6);">
            {{ ((workSheet.sheetHandles[0] && workSheet.sheetHandles[0].createTime) || null) | formatDate }}
          </div>
        </div>
      </div>
      <div class="info-other-title">预警现场数据</div>
      <div class="info-list">
        <x-table :cell-bordered="false" :full-bordered="false" :content-bordered="true" style="background-color:#22233f;" class="componentData">
          <thead>
            <tr>
              <th class="componentData-td">数据位置</th>
              <th class="componentData-td">数据ID</th>
              <th class="componentData-td">数据名称</th>
              <th class="componentData-td">设备名称</th>
              <th class="componentData-td">采集时间</th>
              <th class="componentData-td">数据周期</th>
              <th class="componentData-td">数据值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in sceneData" :key="index">
              <td class="componentData-td">{{ item.departmentName }}</td>
              <td class="componentData-td">{{ item.dataCode }}</td>
              <td class="componentData-td">{{ item.dataName }}</td>
              <td class="componentData-td">{{ item.deviceName }}</td>
              <td class="componentData-td">
                <template v-if="item.ruleStatisticsType">
                  {{ item.beginTime | formatDate }}
                  -
                  {{ item.endTime | formatDate }}
                </template>
                <template v-else-if="item.beginTime">
                  {{ item.beginTime | formatDate }}
                </template>
                <template v-else>
                  -
                </template>
              </td>
              <td class="componentData-td">
                {{ item.ruleStatisticsType ? item.ruleStatisticsName : '实时' }}
              </td>
              <td class="componentData-td">
                <template v-if="item.dataMessages && item.dataMessages.length">
                  <template v-if="item.dataMessages.some((e) => e.dataValue && e.dataValue.includes('http'))">
                    <x-img :src="item.dataMessages.find((e) => e.dataValue.includes('http')).dataValue + '?x-image-process=image/resize,m_fill,h_60,w_60'" :offset="1600" :key="item.id" @click.native="showImage({ url: item.dataMessages.find((e) => e.dataValue.includes('http')).dataValue })"></x-img>
                  </template>
                  <template v-else>
                    {{ (item.dataMessages && item.dataMessages.map((e) => (e.dataValueName ? `${e.dataValueName}：${e.statisticsValue}` : e.dataValue || e.statisticsValue)).join('；')) || '-' }}
                  </template>
                </template>
              </td>
            </tr>
            <tr v-if="!sceneData.length">
              <td colspan="4">暂无数据</td>
            </tr>
          </tbody>
        </x-table>
      </div>
    </div>

    <div class="processWrap" v-if="buttonShow && privilege('wechat_earlywarning', 'wechat_earlywarning:edit')">
      <div>
        <button @click="changeStatue(5)">误报</button>
      </div>
      <div>
        <button @click="changeStatue(3)">确认预警</button>
      </div>
    </div>

    <div v-transfer-dom>
      <x-dialog
        v-model="showDialog"
        class="early_comment_dialog"
        dialog-transition="slideUp"
        :hide-on-blur="true"
        :dialog-style="{
          'max-width': '100%',
          width: '100%',
          'background-color': '#1E1F37!important',
        }"
      >
        <div class="comment_input_box">
          <div class="comment_input_body">
            <template v-if="status === 5">确认为误报</template>
            <template v-else>确认预警</template>
          </div>
          <div class="comment_input_btn">
            <div>
              <button class="confirm_btn confirm-cancel" @click="showDialog = false">
                取消
              </button>
            </div>
            <div>
              <button class="confirm_btn" @click="handleConfirm">
                确认
              </button>
            </div>
          </div>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <x-dialog
        class="early_img_dialog"
        v-model="showDialogImg"
        dialog-transition="slideUp"
        :hide-on-blur="true"
        :dialog-style="{
          'max-width': '100%',
          width: '100%',
          height: '100%',
          'background-color': 'transparent !important',
        }"
      >
        <div @click="showDialogImg = false" class="img-close">
          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
        </div>
        <div class="show-img">
          <x-img :src="imgUrl"></x-img>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem, XDialog, XImg, XTable, TransferDomDirective as TransferDom } from 'vux';
import ShortcutMenu from '../../components/common/shortcut_menu.vue';
/* import BScroll from "better-scroll"; */
import EarlywarningDao from '@/daos/earlywarning_dao';
import WorkSheetDao from '@/daos/work_sheet_dao';
import { Privilege } from '@/mixin';

export default {
  directives: {
    TransferDom,
  },
  inject: ['backToHomepage'],
  components: {
    Flexbox,
    FlexboxItem,
    XImg,
    XTable,
    'shortcut-menu': ShortcutMenu,
    XDialog,
  },
  data() {
    return {
      buttonShow: false,
      detail: {},
      workSheet: {},
      imgUrl: '',
      showDialog: false,
      showDialogImg: false,
      alarmLevelData: ['', '信息', '', '警告', '', '事故'],
      statusData: ['', '待确认', '', '已确认', '', '误报', '', '', '', '已关闭', '超时未处理'],
      status: 0,
      sceneData: [],
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  activated() {
    this.id = this.$route.query.id || 0;
    if (!this.user) {
      this.getUser();
    } else {
      this.init();
    }
  },
  mixins: [Privilege],
  methods: {
    init() {
      this.getEarlywarningDetail(this.id);
    },
    getUser() {
      this.$http(this.$API.getUserInfo, {})
        .then((res) => {
          if (res) {
            this.$store.commit('saveUser', res);
            this.init();
          }
        })
        .catch((e) => {});
    },
    spotCheckView() {
      history.back(-1);
    },
    toWorkSheetNo(id) {
      this.$router.push({
        name: 'workOrderDetails',
        query: {
          id,
        },
      });
    },
    getEarlywarningDetail(id) {
      EarlywarningDao.getEarlywarningDetailById(id, (res) => {
        console.log(res);

        if (res) {
          this.detail = res;
          this.buttonShow = this.detail.status === 1 ? true : false;
          this.getAlarmSceneData();
          if (this.detail.workSheetId) {
            this.getWorkSheetDetail(this.detail.workSheetId);
          }
        }
      });
    },

    showImage(item) {
      this.imgUrl = item.url;
      this.showDialogImg = true;
    },
    changeStatue(status) {
      this.status = status;
      this.showDialog = true;
    },
    handleConfirm() {
      this.handleChangeStatus(this.id, this.status);
      this.showDialog = false;
    },
    handleChangeStatus(id, status) {
      let params = {
        id,
        status,
      };
      EarlywarningDao.putEarlywarningStatus(
        params,
        (res) => {
          if (res) {
            this.$commom.alert('操作成功');
            this.getEarlywarningDetail(this.id);
          }
        },
        (err) => {
          this.$commom.alert('操作失败');
          this.getEarlywarningDetail(this.id);
        }
      );
    },
    getWorkSheetDetail(id) {
      WorkSheetDao.getWorkSheetDetail({ id }, (data) => {
        if (data) {
          this.workSheet = data;
        }
      });
    },
    getAlarmSceneData(id) {
      console.log(325);
      let params = Object.assign({ id: this.detail.id, pageNum: 1, pageSize: 50 });
      EarlywarningDao.getAlarmSceneData(params, (data) => {
        if (data) {
          this.sceneData = data.content;
        }
      });
    },
    show(index) {
      // this.$refs.previewer.show(index);
    },
  },
};
</script>

<style lang="less" scoped>
* {
  touch-action: none;
}
.orderDetail {
  padding-top: 44px;
  box-sizing: border-box;
  height: auto;
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #18182c;
  .backHistory {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
    -o-transform: rotate(90deg);
    line-height: 44px;
    font-size: 25px !important;
    margin-left: 10px;
  }
  .pageTop {
    height: 44px;
    color: #fff;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 999;
    background-color: #22233f;
    .workOrderDetails_header_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
    }
    .home {
      float: right;
      line-height: 44px;
      font-size: 17px;
      margin-right: 15px;
    }
  }
  .processWrap {
    // width: 100%;
    padding: 0 16px;
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    > div {
      width: 48%;
    }
  }
  .processWrap button {
    height: 40px;
    width: 100%;
    background-color: #2c386eff;
    border: none;
    color: #fff;
    font-size: 16px;
    left: 15%;
  }
  .componentData {
    width: 900px;
    color: #fff;
    overflow: auto;
    .componentData-td {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.earlywarning-nfo {
  height: auto;
  margin-top: 12px;
  margin-bottom: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  .info-list {
    margin: 16px;
    padding: 8px;
    background: #22233f;
    border-radius: 3px;
    overflow: auto;
    > div {
      margin: 8px 0;
    }
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      line-height: 20px;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 120px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }

      &.alarmLevel1 {
        color: #409eff;
      }
      &.alarmLevel3 {
        color: #ffb62c;
      }
      &.alarmLevel5 {
        color: #ff2c2c;
      }

      .status1 {
        color: #f56c6c;
      }
      .status3 {
        color: #409eff;
      }
      .status5,
      .status9 {
        color: gray;
      }

      &.priority1 {
        color: #456de6;
      }
      &.priority2 {
        color: #d98806;
      }
      &.priority3 {
        color: red;
      }
    }
    .warning {
      color: #ff2c2c;
    }
  }
  .info-other-title {
    padding: 0 16px;
    color: #fff;
    font-size: 16px;
  }
}

.timeLine {
  display: flex;
  color: #fff;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
.timeleft {
  width: 20%;
}
.groupImg {
  width: 14%;
  text-align: center;
  position: relative;
  top: -5px;
  .imgBorder {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 4em;
    background: #456de6ff;
    line-height: 35px;
    text-align: center;
    margin: 2px 4px;
    .geren {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .borderSty {
      color: #fff;
      font-size: 12px;
      position: relative;
      line-height: 40px;
    }
    .text4 {
      position: relative;
      color: #fff;
      font-size: 9px;
      line-height: 16px;
      padding-top: 4px;
    }
  }
}

.confirm_btn {
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  background: initial;
  font-size: 18px;
  line-height: 44px;
  color: #456de6ff;
  border-top: 1px solid #000;
  &:disabled {
    color: #3c4b8fff;
  }
}
.confirm-cancel {
  border-right: 1px solid #000;
  color: #aaa;
}

/* iphone6 plus */
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  .arrowLine {
    position: relative !important;
    left: 22px !important;
    top: -13px !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 414px) {
  .arrowLine {
    position: relative !important;
    left: 23px !important;
  }
}

.timeImg {
  width: 25px;
  height: 25px;
  position: absolute;
  left: 29%;
  // margin-top: 5px;
  // bottom: 2rem;
}

.slide-out-in-enter-active {
  height: auto;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}
.slide-fade-leave-active {
  height: auto;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}
.slide-fade-enter,
.slide-fade-leave-to {
  height: 0;
}
.flex-demo {
  text-align: center;
  color: #fff;
  background-color: #323465;
  border-radius: 4px;
  background-clip: padding-box;
  height: 125px;
  /*line-height: 125px;*/
  img {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }
  .lineImg1 {
    margin-top: 35px;
  }
  .lineImg2 {
    margin-top: 20px;
  }
}
.comment_input_body {
  padding: 32px;
  font-size: 18px;
  // height: 60px;
  color: rgba(255, 255, 255, 0.6);
}
</style>
<style lang="less">
.early_comment_dialog {
  .weui-dialog {
    top: 30% !important;
  }
  .comment_input_btn {
    display: flex;
    justify-content: space-between;
    > div {
      flex: 1;
    }
  }
}
.early_img_dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
